// 主题配置
$themes: (
  //暗黑主题
  dark: (
      //请注意这里的名字可以随意取，这里不是css，只是一个变量而已！
      background-color: #1a1d1f,
      //背景色
      main-area-bgColor: #111315,
      //右侧操作面板背景区域颜色
      font-color: #ffffff,
      //字体颜色
      font-color-auxiliary: #86909c,
      //字体颜色 辅助性文字
    ),
  //亮色主题
  light: (
      background-color: #ffffff,
      main-area-bgColor: #f7f8fa,
      font-color: #1d2129,
      font-color-auxiliary: #86909c,
      //字体颜色 辅助性文字
    ) //后续如果有其它颜色主题，可以在此处扩展
);

//下面两个方法是根据当前全局获取到的主题色进行遍历，从而找到当前主题下对应配置值

//主题遍历生成样式
@mixin theme-foreach {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global; //变量通过!global提升为全局变量,供后续取值使用
    [data-theme='#{$theme-name}'] & {
      //插槽占位
      @content;
    }
  }
}
//获取主题属性值
@function theme-value($key) {
  @return map-get($theme-map, $key);
}

//设置背景颜色
//这里相当于从当前主题下寻找background-color这个变量所定义的值，最终返回成css样式：background-color: #FFF!important;
@mixin background-color {
  @include theme-foreach {
    background-color: theme-value('background-color') !important;
  }
}
//设置主操作区域颜色
@mixin main-area-bgColor {
  @include theme-foreach {
    background-color: theme-value('main-area-bgColor') !important;
  }
}

//设置字体颜色
@mixin font-color {
  @include theme-foreach {
    color: theme-value('font-color') !important;
  }
}

//设置字体颜色
@mixin font-color-auxiliary {
  @include theme-foreach {
    color: theme-value('font-color-auxiliary') !important;
  }
}
